<template>
  <div class="mine">
    <van-row class="header">
      <van-col span="24" class="img">
        <van-image
          width="50px"
          height="50px"
          round
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="use">
          <button @click="log">登录</button>/<button @click="reg">注册</button>
        </p>
      </van-col>
    </van-row>
    <van-cell title="我的订单" is-link to="order" value="全部订单" class="order" />
    <div>
      <van-tabbar v-model="active" id="bar">
       <van-tabbar-item  icon="pending-payment" @click="obligation" >代付款</van-tabbar-item>
       <van-tabbar-item icon="logistics">待收货</van-tabbar-item>
       <van-tabbar-item icon="https://m.mi.com/static/img/nav-4.d68723895f.png">退货</van-tabbar-item>
</van-tabbar>
    </div>

    <div class="vip">
      
      <van-cell 
      title="会员中心" 
      is-link
      icon="" />
      <!-- <van-cell 
      title="我的优惠" 
      is-link
      icon="" /> -->

      <van-coupon-cell
     :coupons="coupons"
     :chosen-coupon="chosenCoupon"
     icon="" 

     @click="showList = true"
     />
     <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>
    </div>
    <div class="vip">
      
      <van-cell 
      title="服务中心" 
      is-link
      icon="" />
      <van-cell 
      title="爱坤之家" 
      is-link
       icon=""
       />
    </div>
    <div class="vip">
      
      <van-cell 
      title="我的F码" 
      is-link
      icon=""
       />
      <van-cell 
      title="礼物码兑换" 
      is-link
      icon="https://m.mi.com/static/img/i-gift.ece9aa1222.png"
       />
    </div>
    <div class="vip  shezhi">
      <van-cell @click="set"
      title="设置" 
      is-link
      icon="https://m.mi.com/static/img/i-setting.fb9625b3f2.png"
       />
    </div>

  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '我的优惠券',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
};
export default {
  data(){
    return{
      active:0,
      // 在data return 中定义一个showList:false
      showList:false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
    }
  },
  methods:{
    log(){
      this.$router.push("/login")
    },
    reg(){
      this.$router.push("/register")
    },
    obligation(){
      this.$router.push("/car")
    },
    set(){
      this.$router.push("/set")
    },
    onChange(index){
      this.showList=false;
      this.chosenCoupon=index;
    },
    onExchange(){
      this.coupons.push(coupon)
    }
  }
}

</script>

<style scoped>
.mine{
  margin-bottom: 35px;
}
.header{
  overflow-x: hidden;
  width: 100%;
  height: 65px;
  background-color: #f37d0f;
  background-image:url(https://m.mi.com/static/img/bg.63c8e19851.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
.header p{
  margin-top: 20px;
  color: #fff;
  font-size: 13px;
}
.header p button{
  background-color: rgba(255,255, 255, 0);
  border: 0;
}
.header .img {
  margin-left: 20px;
  display: flex;
  margin-top: 10px;
}

 #bar{
  position: relative;
  height: 80px;
 }
 .order{
  font-size: 10px;
 }
 .vip{
  border-top: 10px solid #f5f5f5;
 }
 .shezhi{
  border-bottom: 10px solid #f5f5f5;
 }
</style>
